import React, { useEffect } from 'react';
import './index.less';
import Draggable from '../Draggable';
import IconFont from '../../iconfont';

interface Live2dProps {
  src: string;
  style: React.CSSProperties;
  draggable?: boolean;
  dragIcon?: any;
}
const live2dModelSrc = (src: string) => {
  switch (src) {
    case 'Nahida':
      return 'http://eerkhuaweicloud.cn:5000/Samples/TypeScript/Demo/';
    default:
      return src;
  }
};
function Live2dDisplayer(props: Live2dProps) {
  const { src, style, draggable } = props;
  let { dragIcon } = props;
  if (!dragIcon) {
    dragIcon = <IconFont name="shuyeu" size={24} />;
  }
  return (
    <Draggable style={style} disabled={!draggable}>
      <iframe className="live2d" src={live2dModelSrc(src)}></iframe>
      <div className="drag-button" style={{ visibility: `${draggable ? 'visible' : 'hidden'}` }}>
        {dragIcon}
      </div>
    </Draggable>
  );
}
export default Live2dDisplayer;
